<%--
  Created by IntelliJ IDEA.
  User: 86188
  Date: 2020/11/16
  Time: 22:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="UTF-8" import="java.util.*" %>
<%@include file="../common/IncludeTop.jsp"%>

<div id="Tip">
    <c:if test="${sessionScope.tipInfo != null }">
        <font color="red">${sessionScope.tipInfo}</font>
    </c:if>
</div>

<div id="Catalog">
    <form action="signOn" method="post">
        <p>Please enter your username and password</p>
        </p>
        <table>
            <tr>
                <td>Username:</td>
                <td><input type="text" name="username" placeholder="Username" class="MustFill"/></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type="password" name="password"  placeholder="Password" class="MustFill"/></td>
            </tr>
            <tr>
                <td>Identifying code:</td>
                <td><input type="text" name="valistr" id="valistr" placeholder="Identitying code" class="MustFill"/></td>
            </tr>
            <tr>
                <td><span class="validCode">Click the image</br>
                    to change the code</span></td>
                <td><img id= "valiImage" src= "code" width="" height="" alt="" /></td>
            </tr>
        </table>
        <input type="submit" name="signon" value="Login" />
    </form>


    Need a user name and password?
    <a href="register">Register Now!</a>
</div>

<script>
    var $valistr = $('#valistr');

    //移动到验证码区域，变成小手
    $('#valiImage').mouseover(function () {
        $('#valiImage').css("cursor","hand");
    });

    //点击验证码，更改图片
    $('#valiImage').on('click',function () {
        var date = new Date();
        document.getElementById("valiImage").setAttribute("src","code?temp="+date);
        testValid();
    });

    function testValid(){
        //获得用户输入的数据
        var valid_text = $valistr.val();
        console.log(valid_text);
        //判断非空
        if (valid_text == '') {
            //设置显示的文本字样，并使框为红色
            document.getElementById("valistr").style.borderColor = "red";
        }else {
            console.log("Im going to connect my database");
            //与数据库进行交互，判断验证码是否正确
            //与数据库连接，进行验证
            $.get("handleValidServlet",{"valistr":valid_text},function(data,status,xhr){
                var responseInfo = xhr.responseText;
                console.log(responseInfo);
                //验证码正确
                if(responseInfo === "Right"){
                    //设置显示的文本字样，并使框为绿色
                    document.getElementById("valistr").style.borderColor = "green";
                    console.log(valid_text + "验证码正确");
                    console.log("valid code is true");
                }else if(responseInfo === "Wrong"){
                    //验证码错误
                    //设置显示的文本字样，并使框为红色
                    document.getElementById("valistr").style.borderColor = "red";
                    console.log(valid_text + "验证码不正确");
                }
            });
        }
    }


   $valistr.bind('input propertychange',function(){
        testValid();
    });
</script>


<%@include file="../common/IncludeButtom.jsp"%>
